<template>
	<view class="apply-form-container">
		
		<!-- 成功动画 -->
		<view class="success-animation" v-if="showSuccess">
			<view class="success-icon">
				<!-- <view class="checkmark"></view> -->
				<image src="/static/login/suss.png" mode=""></image>
			</view>
			<view class="success-text success-text1">
				工作会审核你的资料，于1-5个工作日内联系你。
			</view>
			<view class="success-button" @click="goLink">
				<text>完成</text>
			</view>
		</view>
		
		<view v-if="!showSuccess">
		
		<!-- 步骤指示器 -->
		<view class="step-indicator">
			<view class="step-line"></view>
			<view class="step-dots">
				<view class="step-dot" :class="{'active': currentStep >= 1, 'completed': currentStep > 1}">1</view>
				<view class="step-dot" :class="{'active': currentStep >= 2, 'completed': currentStep > 2}">2</view>
				<view class="step-dot" :class="{'active': currentStep >= 3}">3</view>
			</view>
		</view>
		
		<!-- 第一步：基本信息 -->
		<view class="form-content" v-if="currentStep === 1 && !showSuccess" key="step1">
			
			<!-- 头像上传 -->
			<view class="form-item avatar-item">
				<view class="item-label">头像</view>
				<view class="avatar-upload" @click="chooseAvatar">
					<image v-if="formData.avatar" :src="formData.avatar" class="avatar-image" mode="aspectFill"></image>
					<view v-else class="avatar-placeholder">
						<text class="iconfont">&#xe6db;</text>
						<text class="upload-text">点击上传</text>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="item-label">姓名</view>
				<input type="text" v-model="formData.name" placeholder="请输入姓名" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">手机号</view>
				<input type="number" v-model="formData.phone" placeholder="请输入手机号" class="item-input" maxlength="11" />
			</view>
			
			<view class="form-item">
				<view class="item-label">性别</view>
				<view class="radio-group">
					<view class="radio-item" @click="formData.gender = '男'">
						<view class="radio" :class="{'radio-selected': formData.gender === '男'}"></view>
						<text>男</text>
					</view>
					<view class="radio-item" @click="formData.gender = '女'">
						<view class="radio" :class="{'radio-selected': formData.gender === '女'}"></view>
						<text>女</text>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="item-label">身份选择</view>
				<picker mode="selector" :range="identityTypes" @change="onIdentityChange" class="item-picker">
					<view class="picker-value">{{ formData.identityType || '请选择身份类型' }}</view>
				</picker>
			</view>
			
			<!-- 证件照选择 -->
			<view class="form-item">
				<view class="item-label">证件照</view>
				<view class="id-photo-upload" @click="chooseIdPhoto">
					<image v-if="formData.idPhoto" :src="formData.idPhoto" class="id-photo-image" mode="aspectFit"></image>
					<view v-else class="id-photo-placeholder">
						<text class="upload-text">点击上传证件照</text>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="item-label">身份证号码</view>
				<input type="text" v-model="formData.idNumber" placeholder="请输入身份证号码" class="item-input" maxlength="18" />
			</view>
			
			<view class="form-item">
				<view class="item-label">最高学历</view>
				<picker mode="selector" :range="educations" @change="onEducationChange" class="item-picker">
					<view class="picker-value">{{ formData.education || '请选择最高学历' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<view class="item-label">专业</view>
				<input type="text" v-model="formData.major" placeholder="请输入专业" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">生活住所</view>
				<input type="text" v-model="formData.homeAddress" placeholder="请输入生活住所地址" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">工作住所</view>
				<input type="text" v-model="formData.workAddress" placeholder="请输入工作住所地址" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">通讯录地址</view>
				<input type="text" v-model="formData.contactAddress" placeholder="请输入通讯录地址" class="item-input" />
			</view>
		</view>
		
		<!-- 步骤2：联系方式 -->
		<view class="form-content" v-if="currentStep === 2 && !showSuccess" key="step2">
			
			<view class="form-item">
				<view class="item-label">邮箱</view>
				<input type="text" v-model="formData.email" placeholder="请输入邮箱地址" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">教授科目</view>
				<input type="text" v-model="formData.teachSubject" placeholder="请输入您可以教授的主要科目" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">其他科目</view>
				<input type="text" v-model="formData.otherSubjects" placeholder="请输入您可以教授的其他科目" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">可授课区域</view>
				<input type="text" v-model="formData.teachArea" placeholder="请输入您可以授课的区域范围" class="item-input" />
			</view>
			
			<view class="form-item textarea-item">
				<view class="item-label">授课要求</view>
				<textarea v-model="formData.teachRequirements" placeholder="请描述您对授课环境、学生等方面的要求" class="item-textarea" />
			</view>
			
			<view class="form-item">
				<view class="item-label">薪水要求</view>
				<input type="text" v-model="formData.salaryRequirements" placeholder="请输入您期望的薪资范围" class="item-input" />
			</view>
			
			<view class="form-item">
				<view class="item-label">辅导方式</view>
				<picker mode="selector" :range="teachingMethods" @change="onTeachingMethodChange" class="item-picker">
					<view class="picker-value">{{ formData.teachingMethod || '请选择辅导方式' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<view class="item-label">简历状态</view>
				<picker mode="selector" :range="resumeStatuses" @change="onResumeStatusChange" class="item-picker">
					<view class="picker-value">{{ formData.resumeStatus || '请选择简历状态' }}</view>
				</picker>
			</view>
		</view>
		
		<!-- 步骤3：留学信息 -->
		<view class="form-content" v-if="currentStep === 3 && !showSuccess" key="step3">
			<view class="step-title">留学信息</view>
			
			<!-- 获取证书 -->
			<view class="form-item">
				<view class="item-label">获取证书</view>
				<view class="certificates-container">
					<!-- 已上传的证书 -->
					<view class="certificate-item" v-for="(cert, index) in formData.certificates" :key="index">
						<image :src="cert" class="certificate-image" mode="aspectFit"></image>
						<view class="certificate-delete" @click.stop="deleteCertificate(index)">×</view>
					</view>
					<!-- 添加证书按钮 -->
					<view class="certificate-add" @click="chooseCertificate" v-if="formData.certificates.length < 9">
						<text class="add-icon">+</text>
						<text class="add-text">添加证书</text>
					</view>
				</view>
				<text class="tip-text">最多可上传9张证书照片</text>
			</view>
			
			<!-- 特长展示 -->
			<view class="form-item textarea-item">
				<view class="item-label">特长展示</view>
				<textarea v-model="formData.specialSkills" placeholder="请描述您的特长和技能" class="item-textarea" />
			</view>
			
			<!-- 教学成果 -->
			<view class="form-item textarea-item">
				<view class="item-label">教学成果</view>
				<textarea v-model="formData.teachingAchievements" placeholder="请描述您的教学成果和经验" class="item-textarea" />
			</view>
		</view>
		
		<!-- 步骤控制按钮 -->
		<view class="step-buttons">
			<view class="prev-button" v-if="currentStep > 1" @click="prevStep">
				<text>上一步</text>
			</view>
			<view class="next-button" v-if="currentStep < 3" @click="nextStep">
				<text>下一步</text>
			</view>
			<view class="submit-button" v-if="currentStep === 3" @click="submitForm">
				<text>提交申请</text>
			</view>
		</view>
		</view> <!-- 闭合v-if="!showSuccess"的view标签 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentStep: 1, // 当前步骤
			showSuccess: false, // 是否显示成功动画
			formData: {
				avatar: '', // 头像
				name: '', // 姓名
				gender: '男', // 性别
				phone: '', // 手机号
				email: '', // 邮箱
				identityType: '', // 身份类型
				idPhoto: '', // 证件照
				idNumber: '', // 身份证号码
				major: '', // 专业
				homeAddress: '', // 生活住所
				workAddress: '', // 工作住所
				contactAddress: '', // 通讯录地址
				// 第二步：联系方式新增字段
				teachSubject: '', // 教授科目
				otherSubjects: '', // 其他科目
				teachArea: '', // 可授课区域
				teachRequirements: '', // 授课要求
				salaryRequirements: '', // 薪水要求
				teachingMethod: '', // 辅导方式
				resumeStatus: '网站公开简历，要做家教', // 简历状态
				// 第三步
				certificates: [], // 获取证书
				specialSkills: '', // 特长展示
				teachingAchievements: '' // 教学成果
			},
			countries: ['美国', '英国', '加拿大', '澳大利亚', '新西兰', '日本', '韩国', '新加坡', '德国', '法国'],
			educations: ['高中', '大专', '本科', '硕士', '博士'],
			identityTypes: ['学生', '在职人员', '自由职业者', '其他'],
			teachingMethods: ['线上辅导', '线下辅导', '混合模式'],
			resumeStatuses: ['网站公开简历，要做家教', '网站不公开简历，要做家教']
		}
	},
	methods: {
		goLink() {
			console.log('跳转到主页面');
			uni.switchTab({
				url:'/pages/home/home'
			})
		},
		goBack() {
			uni.navigateBack();
		},
		// 选择头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 从相册选择或拍照
				success: (res) => {
					this.formData.avatar = res.tempFilePaths[0];
				}
			});
		},
		// 选择证件照
		chooseIdPhoto() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.formData.idPhoto = res.tempFilePaths[0];
				}
			});
		},
		// 身份类型选择
		onIdentityChange(e) {
			this.formData.identityType = this.identityTypes[e.detail.value];
		},
		// 下一步
		nextStep() {
			// 验证当前步骤
			if (this.currentStep === 1) {
				// 验证基本信息
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.identityType) {
					uni.showToast({
						title: '请选择身份类型',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.idNumber) {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					});
					return;
				}
			} else if (this.currentStep === 2) {
				// 验证联系方式
				if (!this.formData.email) {
					uni.showToast({
						title: '请输入邮箱地址',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.teachSubject) {
					uni.showToast({
						title: '请输入教授科目',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.teachArea) {
					uni.showToast({
						title: '请输入可授课区域',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.salaryRequirements) {
					uni.showToast({
						title: '请输入薪水要求',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.teachingMethod) {
					uni.showToast({
						title: '请选择辅导方式',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.resumeStatus) {
					uni.showToast({
						title: '请选择简历状态',
						icon: 'none'
					});
					return;
				}
			}
			
			// 进入下一步
			if (this.currentStep < 3) {
				this.currentStep++;
				uni.showToast({
					title: `第${this.currentStep}步`,
					icon: 'none',
					duration: 1000
				});
			}
		},
		// 上一步
		prevStep() {
			if (this.currentStep > 1) {
				this.currentStep--;
			}
		},
		onCountryChange(e) {
			this.formData.country = this.countries[e.detail.value];
		},
		onEducationChange(e) {
			this.formData.education = this.educations[e.detail.value];
		},
		// 辅导方式选择
		onTeachingMethodChange(e) {
			this.formData.teachingMethod = this.teachingMethods[e.detail.value];
		},
		// 简历状态选择
		onResumeStatusChange(e) {
			this.formData.resumeStatus = this.resumeStatuses[e.detail.value];
		},
		// 选择证书
		chooseCertificate() {
			uni.chooseImage({
				count: 9, // 最多可以选择的图片张数
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
				sourceType: ['album', 'camera'], // 从相册选择或拍照
				success: (res) => {
					// 将新选择的证书添加到数组中
					this.formData.certificates = [...this.formData.certificates, ...res.tempFilePaths];
				}
			});
		},
		// 删除证书
		deleteCertificate(index) {
			this.formData.certificates.splice(index, 1);
		},
		submitForm() {
			// 表单验证
			if (!this.formData.education) {
				uni.showToast({
					title: '请选择学历',
					icon: 'none'
				});
				return;
			}
			if (this.formData.certificates.length === 0) {
				uni.showToast({
					title: '请上传至少一个证书',
					icon: 'none'
				});
				return;
			}
			if (!this.formData.specialSkills) {
				uni.showToast({
					title: '请填写特长展示',
					icon: 'none'
				});
				return;
			}
			
			// 提交表单
			uni.showLoading({
				title: '提交中...'
			});
			
			// 模拟提交
			setTimeout(() => {
				uni.hideLoading();
				
				// 显示成功动画，隐藏表单内容
				this.showSuccess = true;
				
				// 不自动返回，让用户欣赏成功页面
			}, 1500);
		}
	}
}
</script>

<style scoped lang="scss">
.apply-form-container {
	background-image: url('/static/login/lg04.png');
	/* #ifndef APP */
	height: 1596rpx;
	/* #endif */
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top: 30rpx;
	/* #ifdef APP */
	height: 1620rpx;
	/* #endif */
	
}

.form-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	padding: 0 20rpx;
	margin-top: 20rpx;
}

.back-button {
	font-size: 40rpx;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.placeholder {
	width: 40rpx;
}

/* 步骤指示器样式 */
.step-indicator {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 30rpx 0;
	padding: 0 60rpx;
	margin-top: 480rpx;
}

.step-line {
	position: absolute;
	top: 50%;
	left: 60rpx;
	right: 60rpx;
	height: 2rpx;
	background-color: #ddd;
	transform: translateY(-50%);
	z-index: 1;
}

.step-dots {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
	z-index: 2;
}

.step-dot {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #fff;
	border: 2rpx solid #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #999;
	font-weight: bold;
	position: relative;
	transition: all 0.3s ease;
}

.step-dot.active {
	background-color: #007aff;
	border-color: #007aff;
	color: #fff;
	transform: scale(1.1);
	box-shadow: 0 0 10rpx rgba(0, 122, 255, 0.5);
}

.step-dot.completed {
	background-color: #c9c9c9;
	border-color: #c9c9c9;
	color: #fff;
}

/* 步骤标题 */
.step-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	text-align: center;
	position: relative;
}

.step-title::after {
	content: '';
	position: absolute;
	bottom: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #007aff;
	border-radius: 2rpx;
}

.form-content {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	min-height: 500rpx;
	animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 成功动画样式 */
.success-animation {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	animation: fadeIn 0.5s ease-in-out;
	z-index: 10;
}

.success-icon {
	width: 180rpx;
	height: 180rpx;
	border-radius: 50%;
	/* background-color: rgba(255, 255, 255, 0.9); */
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
	animation: scaleIn 0.5s ease-in-out;
	/* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2); */
	image {
		width: 172rpx;
		height: 172rpx;
	}
}

.checkmark {
	width: 100rpx;
	height: 50rpx;
	border-bottom: 12rpx solid #007aff;
	border-right: 12rpx solid #007aff;
	transform: rotate(45deg) translate(-10rpx, -5rpx);
	animation: checkmark 0.5s ease-in-out 0.5s forwards;
	opacity: 0;
}

.success-text {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	animation: fadeIn 0.5s ease-in-out 0.8s, bounce 2s ease-in-out 1.5s;
}
.success-text1 {
	font-size: 14px!important;
	color: #767D8A!important;
	text-shadow: none!important;
	margin-top: 20rpx;
}

@keyframes scaleIn {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@keyframes checkmark {
	from {
		opacity: 0;
		transform: rotate(45deg) translate(-10rpx, -5rpx) scale(0.8);
	}
	to {
		opacity: 1;
		transform: rotate(45deg) translate(-10rpx, -5rpx) scale(1);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-20rpx);
	}
	60% {
		transform: translateY(-10rpx);
	}
}

.form-item {
	margin-bottom: 30rpx;
}

.item-label {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 15rpx;
	font-weight: 500;
}

.item-input {
	height: 80rpx;
	border: 1px solid #e5e5e5;
	border-radius: 10rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.radio-group {
	display: flex;
	align-items: center;
}

.radio-item {
	display: flex;
	align-items: center;
	margin-right: 50rpx;
}

.radio {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 1px solid #ccc;
	margin-right: 10rpx;
	position: relative;
}

.radio-selected {
	border-color: #007aff;
}

.radio-selected::after {
	content: '';
	position: absolute;
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #007aff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.item-picker {
	height: 80rpx;
	border: 1px solid #e5e5e5;
	border-radius: 10rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
}

.picker-value {
	font-size: 28rpx;
	color: #666;
}

.textarea-item {       
	margin-bottom: 50rpx;
}

.item-textarea {
	border: 1px solid #e5e5e5;
	border-radius: 10rpx;
	padding: 20rpx;
	font-size: 28rpx;
	height: 200rpx;
	width: 646rpx;
}

gshi/* 头像上传样式 */
.avatar-item {
	display: flex;
	flex-direction: column;
}

.avatar-upload {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2rpx dashed #ddd;
}

.avatar-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.avatar-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 24rpx;
}

.avatar-placeholder .iconfont {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
}

/* 证件照上传样式 */
.id-photo-upload {
	width: 100%;
	height: 300rpx;
	border-radius: 10rpx;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2rpx dashed #ddd;
	margin-top: 10rpx;
}

.id-photo-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.id-photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #999;
}

/* 步骤按钮 */
.step-buttons {
	display: flex;
	justify-content: space-around;
	margin: 50rpx 0;
}

.prev-button, .next-button, .submit-button {
	height: 90rpx;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	transition: all 0.3s ease;
}

.prev-button {
	background-color: #f2f2f2;
	color: #666;
	width: 200rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}
.success-button {
	background-color: #2196F3;
	color: #fff;
	width: 300rpx;
	height: 66rpx;
	line-height: 66rpx;
	margin-top: 66rpx;
	text-align: center;
	border-radius: 32rpx;
}

.next-button {
	background-color: #007aff;
	color: #fff;
	width: 200rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.3);
}

.submit-button {
	background-color: #007aff;
	color: #fff;
	width: 100%;
	box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.3);
}

.prev-button:active, .next-button:active, .submit-button:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 当只有一个按钮时的样式 */
.step-buttons .next-button:only-child,
.step-buttons .submit-button:only-child {
	width: 60%;
	margin: 0 auto;
}

/* 简历状态标签样式 */
/* 简历状态标签样式已移除，改为使用选择器 */

/* 证书上传样式 */
.certificates-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-top: 10rpx;
}

.certificate-item {
	width: 200rpx;
	height: 150rpx;
	border: 1px solid #e5e5e5;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
}

.certificate-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.certificate-delete {
	position: absolute;
	top: 0;
	right: 0;
	width: 40rpx;
	height: 40rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	border-bottom-left-radius: 10rpx;
}

.certificate-add {
	width: 200rpx;
	height: 150rpx;
	border: 1px dashed #ccc;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #999;
}

.add-icon {
	font-size: 50rpx;
	line-height: 1;
	margin-bottom: 10rpx;
}

.add-text {
	font-size: 24rpx;
}

.tip-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
	display: block;
}
</style>